<template>
  <view
    class="relative flex"
    :style="{
      width: props.width + 'rpx',
      height: props.height + (_showBar ? 32 : 0) + 'rpx',
    }"
  >
    <!-- #ifdef APP-NVUE -->
    <scroll-view
      @scroll="onScroll"
      :scroll-left="scrollLeft"
      :show-scrollbar="false"
      :scroll-x="true"
      class="flex flex-row flex-nowrap nowrap"
      :style="{ width: props.width + 'rpx', height: props.height + 'rpx' }"
    >
      <slot name="default"></slot>
    </scroll-view>
    <!-- #endif -->
    <!-- #ifndef APP-NVUE -->
    <scroll-view
      @scroll="onScroll"
      :scroll-left="scrollLeft"
      :scroll-x="true"
      class="flex flex-row flex-nowrap nowrap"
      :style="{ width: props.width + 'rpx', height: props.height + 'rpx' }"
    >
      <view class="flex-1 flex-row flex-nowrap">
        <slot name="default"></slot>
      </view>
    </scroll-view>
    <!-- #endif -->
    <view
      v-if="_showBar"
      class="absolute l-0 b-10 flex"
      :class="alignKey[props.align]"
      :style="{ width: props.width + 'rpx', height: 32 + 'rpx' }"
    >
      <view v-if="props.align=='between'" class="flex-1 pr-40" style="width: 0px">
        <slot name="barll"></slot>
      </view>
      <view style="width: 100rpx">
        <tm-sheet
          no-level
          :round="6"
          :width="100"
          :height="8"
          :color="props.bgColor"
          :margin="[0, 0]"
          :padding="[0, 0]"
        >
          <view
            class="bar"
            :style="{
              transform: `translateX(${left}px)`,
            }"
          >
            <tm-sheet
              :round="6"
              :width="50"
              :height="8"
              :color="props.color"
              :margin="[0, 0]"
              :padding="[0, 0]"
            ></tm-sheet>
          </view>
        </tm-sheet>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, PropType } from "vue";
import tmSheet from "../tm-sheet/tm-sheet.vue";
import tmText from "../tm-text/tm-text.vue";
//居中，两边对齐。
type alignType = "center" | "between";
const emits = defineEmits(["change"]);

const props = defineProps({
  width: {
    type: Number,
    default: 636,
  },
  height: {
    type: Number,
    default: 300,
  },
  /**
   * 是否显示底部导航条
   */
  showBar: {
    type: Boolean,
    default: true,
  },
  bgColor: {
    type: String,
    default: "grey-2",
  },
  color: {
    type: String,
    default: "primary",
  },
  align: {
    type: String as PropType<alignType>,
    default: "center",
  }
});
const left = ref(0);
const totalWidth = uni.upx2px(50);
const totalContWidth = uni.upx2px(props.width);
const _showBar = computed(() => props.showBar);
const alignKey = {
  center: "flex-center",
  between: "flex-row flex-row-center-between",
};
const onScroll = (e: Event) => {
  emits("change", e.detail);
  if (!_showBar.value) return;
  let sL = e.detail.scrollLeft;
  let sT = e.detail.scrollWidth;
  let maxLeft = Math.abs(sT - totalContWidth);
  let nowLeft = (sL / maxLeft) * totalWidth;
  if (sL <= 0) nowLeft = 0;
  if (Math.abs(sL) >= maxLeft) {
    nowLeft = totalWidth;
  }
  left.value = nowLeft;
};
const scrollLeft = ref(0);
const scrollTo = (value: number) => {
  scrollLeft.value = value;
};
defineExpose({ scrollTo });
</script>

<style scoped>
.bar {
  transition-property: transform;
  transition-delay: 0;
  transition-duration: 0.05s;
  transition-timing-function: linear;
  transform: translateX(0px);
}
/* #ifndef APP-NVUE */
scroll-view::-webkit-scrollbar,
scroll-view::-webkit-scrollbar,
scroll-view::-webkit-scrollbar {
  display: none;
}
/* #endif */
</style>
